<template>
	<up-popup :show="loginPopup" @close="loginPopup = false" :round="20" :closeOnClickOverlay="false" mode="center" :safeAreaInsetBottom="false">
		<view class="auth-container">
			<text class="tip-text">为了更好的提供服务，请授权用户信息</text>
			<text class="tip-text">登录后可体验完整功能~</text>
			<button class="auth-btn" open-type="getPhoneNumber" @getphonenumber="mpWeiXinLogin" v-if="formRef.source == 'mp-weixin'">
				<text class="btn-text">微信一键登录</text>
			</button>

			<button class="auth-btn" @click="wechatAuth()" v-else>
				<text class="btn-text">微信一键登录</text>
			</button>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { port, hint, loading, closeLoading } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const loginPopup = ref(false);

	const formRef = ref({
		parent_code: '',
		source: ''
	});

	const code = ref('');
	const state = ref('');

	onLoad((e) => {
		if (e.parent_code) {
			formRef.value.parent_code = e.parent_code;
		}
	});

	onShow(() => {
		// #ifdef MP-WEIXIN
		formRef.value.source = 'mp-weixin';
		// #endif
		const token = uni.getStorageSync('token');
		// #ifdef H5
		formRef.value.source = 'h5';
		const hash = window.location.search;
		const paramString = hash.split('?')[1] || '';
		const params = new URLSearchParams(paramString);
		if (params.get('state')) {
			state.value = params.get('state');
		}
		if (params.get('code') && !token) {
			code.value = params.get('code');
			wechatAuthLogin();
		}
		// #endif

		if (!token) {
			loginPopup.value = true;
		}
	});

	async function mpWeiXinLogin(p) {
		loading();
		uni.login({
			async success(e) {
				const res = await port('wechatAuth', {
					code: e.code,
					phone_code: p.detail.code,
					parent_code: formRef.value.parent_code,
					source: formRef.value.source
				});

				setTimeout(() => {
					hint(res.msg);
					uni.setStorageSync('token', res.data.token);
					loginPopup.value = false;
					closeLoading();
				}, 200);
			}
		});
	}

	async function wechatAuthLogin() {
		loading();
		let res = await port('wechatRedirect', { code: code.value, state: state.value });
		loginPopup.value = false;
		await nextTick();
		hint(res.msg);
		uni.setStorageSync('token', res.data.token);
		closeLoading();
	}

	function wechatAuth() {
		loading();
		port('wechatAuth', formRef.value).then((res) => {
			closeLoading();
			location.href = res.data.url;
		});
	}
</script>

<style scoped lang="scss">
	.auth-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;

		.tip-text {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 60rpx;
		}

		.auth-btn {
			width: 560rpx;
			height: 88rpx;
			background: linear-gradient(45deg, #09be67, #0bbf6a);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			box-shadow: 0 8rpx 16rpx rgba(11, 191, 106, 0.2);

			.icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}

			.btn-text {
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>
